<template>
  <div class="container">
    <!-- <el-button type="text" @click="dialogForm()"
      >打开嵌套表单的 Dialog</el-button
    > -->

    <div>
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item
          prop="title"
          label="文章标题:"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="form.title"
            placeholder="请输入文章标题"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="articleBody"
          label="文章内容:"
          :label-width="formLabelWidth"
        >
          <quillEditor
            :options="editorOption"
            v-model="form.articleBody"
            style="height: 100%; width: 424px"
          ></quillEditor>
        </el-form-item>
        <el-form-item label="视频地址:" :label-width="formLabelWidth">
          <el-input
            v-model="form.videoURL"
            placeholder="请输入视频地址"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <div style="margin-left: 200px">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import { add } from '@/api/hmmm/articles.js'
export default {
  components: {
    quillEditor
  },

  data () {
    return {
      editorOption: {
        modules: {
          // modules为自定义标题栏，使用默认的话可去掉modules
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 分别对应的是： 粗体，斜体，下划线，删除线
            ['blockquote', 'code-block'], //
            // [{ header: 1 }, { header: 2 }],
            // [{ list: 'ordered' }, { list: 'bullet' }], // 显示有序和无序列表
            // [{ color: [] }, { background: [] }], // 显示背景字体颜色
            // [{ font: [] }], // 显示字体选择
            [{ align: [] }], // 显示居中
            ['link', 'image'] // 显示超链接, 插入图片
          ]
        }
      },
      form: {
        title: '', // 文章标题
        articleBody: '', // 文章内容
        videoURL: '' // 视频
      },
      formLabelWidth: '120px', // 弹框宽度
      // 表单验证规则
      rules: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        articleBody: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ]
      }
    }
  },

  methods: {
    closeDialog (obj) {
      // 给父组件传事件点取消关闭弹窗
      //   console.log(obj)
      this.$emit('closeDialog')
    },
    resetForm () {
      this.form = {}// 清空输入框
      this.$nextTick(() => {
        this.$refs.form.clearValidate()// 清空表单校验
      })
    },
    // 添加技巧提交
    async submit () {
      this.$refs.form.validate(async (valid) => {
        if (!valid) {
          this.$message.error('添加失败!')
        } else {
          try {
            const res = await add(this.form)
            console.log('添加完成之后的回显', res)
            this.$message.success('新增文章成功!')
            //  关闭弹层
            this.closeDialog()
          } catch (err) {
            this.$message.error(err.message)
          }
        }
      })
    }
  }
}
</script>

<style scoped lang='scss'>
</style>
